<template>
    <div id="treeRelationship" class="tree_relationship">
        <i-line :config="configLine"></i-line>
        <div class="tree_relationship-left">
            <div v-for="(item,index) in dataObj.leftData" class="tree_relationship-left-card" @click.stop="leftClick(item,index)">
                <i-point ref="leftIpoint" :option="item" :index="index" :type="'left'" @left_Click="leftClick" />
                <i-branch :branch='leftToMiddleForBranch(item,index)' />
                <component :is="landCard" :landImg='landImg'></component>
            </div>
        </div>
        <div class="tree_relationship-middle">
            <div v-for="(item,index) in dataObj.middleData" class="tree_relationship-middle-card" @click.stop="middleClick(item,index)">
                <i-point ref="middleIpoint" :option="item" :index="index" :type="'middle'" @middle_click="middleClick" />
                <i-branch :branch='middleToLeftToRightForBranch(item,index)' />
                <component :is="buildingCard" :buildingImg="buildingImg"></component>
            </div>
        </div>
        <div class="tree_relationship-right">
            <div v-for="(item,index) in dataObj.rightData" class="tree_relationship-right-card">
                <i-point ref="rightIpoint" :option="item"/>
                <i-branch :branch='RightToMiddleForBranch(item,index)' />
                <component :is="buildingCard" :buildingImg="buildingImg"></component>
            </div>
        </div>
    </div>
</template>
<script>
import branch from './branch.vue'
import line from './line.vue'
import point from './point.vue'
// import { mapState, mapActions, mapMutations,mapGetters } from 'vuex'
export default {
    name: '',
    props: ['treeData','landCard','buildingCard','landImg','buildingImg'],
    data() {
        return {
            configLine: {
                leftPointStarttIndex: null,
                leftPointUpEndIndex: null,
                leftPointDownEndIndex: null,
                rightPointStarttIndex: null,
                rightPointUpEndIndex: null,
                rightPointDownEndIndex: null,
                isLeftUp: {
                    isShow: false,
                    top: '230px',
                    height: '48px'
                },
                isLeftDown: {
                    isShow: false,
                    top: '48px',
                    height: '148px'
                },
                isRightUp: {
                    isShow: false,
                    top: '78px',
                    height: '148px'
                },
                isRightDown: {
                    isShow: false,
                    top: '248px',
                    height: '148px'
                },
            },
            dataObj: {
                leftData: [],
                middleData: [],
                rightData: [],
            }
        };
    },
    components: {
        'i-branch': branch,
        'i-line': line,
        'i-point': point
    },
    computed: {
        // ...mapGetters('admin/treeRelationship', ['showAddShow'])
    },
    beforeMount() { },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.dataObj.leftData = this.treeData;
        },
        // ...mapActions('admin/treeRelationship', ['changeAddShow']),
        leftClick(item, index) {
            if (item.children && item.children.length !== 0) {
                this.$refs.leftIpoint[index].clickChange(!this.$refs.leftIpoint[index].addShow);
                this.dataObj.middleData = !this.$refs.leftIpoint[index].addShow ? item.children || [] : [];
                this.dataObj.rightData = [];
                this.reset()
            }
        },
        middleClick(item, index) {
            if (item.children && item.children.length !== 0) {
                this.$refs.middleIpoint[index].clickChange(!this.$refs.middleIpoint[index].addShow)
                this.dataObj.rightData = !this.$refs.middleIpoint[index].addShow ? item.children || [] : [];
                this.reset()
            }
        },
        reset() {
            this.configLine = {
                leftPointStarttIndex: null,
                leftPointUpEndIndex: null,
                leftPointDownEndIndex: null,
                rightPointStarttIndex: null,
                rightPointUpEndIndex: null,
                rightPointDownEndIndex: null,
                isLeftUp: {
                    isShow: false,
                    top: '230px',
                    height: '48px'
                },
                isLeftDown: {
                    isShow: false,
                    top: '48px',
                    height: '148px'
                },
                isRightUp: {
                    isShow: false,
                    top: '78px',
                    height: '148px'
                },
                isRightDown: {
                    isShow: false,
                    top: '248px',
                    height: '148px'
                },
            }
        },


        leftToMiddleForBranch(item, index) {
            let newConfig
            newConfig = {
                rightUp: false,
                rightDown: false,
                leftUp: false,
                leftDown: false,
                straightRight: false,
                straightLeft: false
            }
            for (let i = 0; i < this.dataObj.middleData.length; i++) {
                const element = this.dataObj.middleData[i];
                if (element.parent && item.id == element.parent) {
                    // 记录点
                    // leftPointStarttIndex: null,
                    // leftPointEndIndex: null,
                    if (this.configLine.leftPointStarttIndex) {
                        if (this.configLine.leftPointStarttIndex > index) {
                            this.configLine.leftPointStarttIndex = index;
                        }
                    } else {
                        this.configLine.leftPointStarttIndex = index;
                    }

                    if (index == i) {
                        newConfig.straightRight = true;
                    } else if (index < i) {
                        newConfig.rightDown = true;
                        // 记录中间大小节点下标值
                        if (this.configLine.leftPointDownEndIndex !== null) {
                            if (this.configLine.leftPointDownEndIndex < i) {
                                this.configLine.leftPointDownEndIndex = i
                            }
                        } else {
                            this.configLine.leftPointDownEndIndex = i;
                        }
                    } else if (index > i) {
                        newConfig.rightUp = true;
                        this.configLine.isLeftUp.isShow = true;
                        // 记录中间大小节点下标值
                        if (this.configLine.leftPointUpEndIndex !== null) {
                            if (this.configLine.leftPointUpEndIndex > i) {
                                this.configLine.leftPointUpEndIndex = i
                            }
                        } else {
                            this.configLine.leftPointUpEndIndex = i;
                        }
                    }
                }
            }
            if (this.configLine.leftPointDownEndIndex !== null) {
                this.configLine.isLeftDown.isShow = true;
                let lineHeight = this.configLine.leftPointDownEndIndex * 142;
                lineHeight += this.configLine.leftPointDownEndIndex * 20;
                lineHeight = lineHeight - 108;
                let lintop = this.configLine.leftPointDownEndIndex * 142;
                lintop += this.configLine.leftPointDownEndIndex * 20;
                lintop = lintop + 27 - lineHeight - 52;
                this.configLine.isLeftDown.height = lineHeight + 'px'
                this.configLine.isLeftDown.top = lintop + 'px'
            }
            if (this.configLine.leftPointUpEndIndex !== null) {
                this.configLine.isLeftUp.isLeftUp = true;
                let endIndex = this.configLine.leftPointStarttIndex - this.configLine.leftPointUpEndIndex;
                let lineHeight = endIndex * 142;
                lineHeight += endIndex * 20;
                lineHeight -= 108;
                let lintop = this.configLine.leftPointUpEndIndex * 142;
                lintop += this.configLine.leftPointUpEndIndex * 20;
                lintop = lintop + 27 + 54;
                this.configLine.isLeftUp.height = lineHeight + 'px'
                this.configLine.isLeftUp.top = lintop + 'px'
            }
            return newConfig
        },
        middleToLeftToRightForBranch(item, index) {
            let newConfig;
            newConfig = {
                rightUp: false,
                rightDown: false,
                leftUp: false,
                leftDown: false,
                straightRight: false,
                straightLeft: false
            }
            for (let i = 0; i < this.dataObj.leftData.length; i++) {
                const mainItem = this.dataObj.leftData[i];
                if (item.parent == mainItem.id) {
                    if (i == index) {
                        newConfig.straightLeft = true;
                    } else if (i > index) {
                        newConfig.leftDown = true;
                    } else if (i < index) {
                        newConfig.leftUp = true;
                    }
                }
            }
            for (let j = 0; j < this.dataObj.rightData.length; j++) {
                const rightItem = this.dataObj.rightData[j];
                if (item.id == rightItem.parent) {
                    if (this.configLine.rightPointStarttIndex) {
                        if (this.configLine.rightPointStarttIndex < index) {
                            this.configLine.rightPointStarttIndex = index;
                        }
                    } else {
                        this.configLine.rightPointStarttIndex = index;
                    }
                    if (index == j) {
                        newConfig.straightRight = true;
                    } else if (index < j) {
                        newConfig.rightDown = true;
                        if (this.configLine.rightPointDownEndIndex !== null) {
                            if (this.configLine.rightPointDownEndIndex < j) {
                                this.configLine.rightPointDownEndIndex = j
                            }
                        } else {
                            this.configLine.rightPointDownEndIndex = j
                        }
                    } else if (index > j) {
                        newConfig.rightUp = true;
                        if (this.configLine.rightPointUpEndIndex !== null) {
                            if (this.configLine.rightPointUpEndIndex > j) {
                                this.configLine.rightPointUpEndIndex = j
                            }
                        } else {
                            this.configLine.rightPointUpEndIndex = j
                        }
                    }
                }
            }
            if (this.configLine.rightPointUpEndIndex !== null) {
                this.configLine.isRightUp.isShow = true;
                let endIndex = this.configLine.rightPointStarttIndex - this.configLine.rightPointUpEndIndex;
                let lineHeight = endIndex * 142;
                lineHeight += endIndex * 20;
                lineHeight -= 108;
                this.configLine.isRightUp.height = lineHeight + 'px'
                if (this.configLine.rightPointUpEndIndex !== 0) {
                    let lintop = this.configLine.rightPointUpEndIndex * 142;
                    lintop += this.configLine.rightPointUpEndIndex * 20;
                    lintop = lintop + 27 + 56;
                    this.configLine.isRightUp.top = lintop + 'px'
                } else {
                    let lintop = 0;
                    lintop = lintop + 27 + 56;
                    this.configLine.isRightUp.top = lintop + 'px'
                }
            }
            if (this.configLine.rightPointDownEndIndex !== null) {
                this.configLine.isRightDown.isShow = true;
                let endIndex = this.configLine.rightPointDownEndIndex - this.configLine.rightPointStarttIndex;
                let lineHeight = endIndex * 142;
                lineHeight += endIndex * 20;
                lineHeight -= 108;
                this.configLine.isRightDown.height = lineHeight + 'px'

                let lintop = this.configLine.rightPointStarttIndex * 142;
                lintop += this.configLine.rightPointStarttIndex * 20;
                lintop = lintop + 27 + 56;
                this.configLine.isRightDown.top = lintop + 'px'
            }
            return newConfig
        },
        RightToMiddleForBranch(item, index) {
            let newConfig;
            newConfig = {
                rightUp: false,
                rightDown: false,
                leftUp: false,
                leftDown: false,
                straightRight: false,
                straightLeft: false
            }
            for (let i = 0; i < this.dataObj.middleData.length; i++) {
                const element = this.dataObj.middleData[i];
                if (item.parent == element.id) {
                    if (index == i) {
                        newConfig.straightLeft = true;
                    } else if (index < i) {
                        newConfig.leftDown = true
                    } else if (index > i) {
                        newConfig.leftUp = true
                    }
                }
            }
            return newConfig
        }
    },
    watch: {}
}
</script>
<style lang="less" scoped>
@blue: #2d8cf0;
@cardBgColor: #f7fafb;
@card_left_mg: 45px;
@card_left_width: 280px;

.tree_relationship {
    // background: #fff;
    position: relative;
    width: 1190px;
    height: 1118.45px;
    background: #fff;
    display: flex;
    z-index: 1;
    &-left {
        position: relative;
        // text-align: center;
        margin-left: @card_left_mg;
        z-index: 1;
        &-card {
            border: 1px solid @blue;
            width: @card_left_width;
            height: 382px;
            background: @cardBgColor;
            margin: 0 auto;
            position: relative;
            border-radius: 8px;
        }
        &-card:not(:first-child) {
            margin-top: 20px;
        }
    }
    &-middle {
        position: relative;
        // text-align: center;
        margin-left: 106px;
        z-index: 1;
        &-card {
            border: 1px solid @blue;
            width: 304px;
            height: 142px;
            background: @cardBgColor;
            margin: 0 auto;
            position: relative;
            border-radius: 8px;
        }
        &-card:not(:first-child) {
            margin-top: 20px;
        }
    }
    &-right {
        position: relative;
        // text-align: center;
        margin-left: 106px;
        z-index: 1;
        &-card {
            border: 1px solid @blue;
            width: 304px;
            height: 142px;
            background: @cardBgColor;
            margin: 0 auto;
            position: relative;
            border-radius: 8px;
        }
        &-card:not(:first-child) {
            margin-top: 20px;
        }
    }
}
</style>